<template>
    <div>
        <el-dialog title="任免表" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
            <!-- 点击打印展示出来打印的框 -->
            <el-button type="primary" plain style="margin-bottom:5px;" @click="handlePrint">打印任免表</el-button>
            <el-row>
                <el-col :span="12">
                    <div>
                        <table border="1" class="tableOne" v-for="(item, index) in dataList" :key="index">
                            <thead>
                                <tr>
                                    <th>姓名</th>
                                    <td>{{ item.xingming }}</td>
                                    <th>性别</th>
                                    <td>{{ item.xingbie }}</td>
                                    <th>出生年月</th>
                                    <td>{{ item.csny }}</td>
                                    <td rowspan="4" style="width: 130px;"></td>
                                </tr>
                                <tr>
                                    <th>民族</th>
                                    <td>{{ item.minzu_mc }}</td>
                                    <th>籍贯</th>
                                    <td>{{ item.jiguan }}</td>
                                    <th>出生地</th>
                                    <td>{{ item.chushengdi }}</td>
                                </tr>
                            </thead>
                        </table>

                    </div>
                </el-col>
            </el-row>
            <!-- 引用那个打印的模板 -->
            <print-person ref="myPrintPerson" :list="dataList" />

        </el-dialog>
    </div>
</template>
  
<script>
import PrintPerson from './components/printPersone.vue'
export default {
    components: {
        PrintPerson,
    },
    data() {
        return {
            dialogVisible: false,
            dataList: [],
        };
    },
    created() {

    },
    methods: {
        init(dataList) {
            this.dialogVisible = true;
            this.dataList = dataList;
            this.getList();
        },
        handleClose(done) {
            done();
        },

        // 打印按钮的事件
        handlePrint() {
            let refPrint = this.$refs['myPrintPerson']
            refPrint && refPrint.print()
        },
    }
};
</script>